<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程页面</title>
    <link rel="stylesheet" type="text/css" href="/css/course.css">
</head>
<body>
<div id="course">
    <Header></Header>
    <div style="background: #eee;">
        <!-- 面包屑导航 -->
        <div class="nav-wrap">
            <p class="nav-p-pc" style="margin-top:-25px;text-align:left;">
                <a href="/">课程列表</a>
                <span class="sharp-content">&gt;</span>
                <span class="nav-sec">{{course.courseName}}</span>
            </p>
        </div>
        <!-- 课程详情 -->
        <div class="container">
            <div style="height: 100%;">
                <div class="weui-tab content-wrapper">
                    <div
                            id="vux_view_box_body"
                            class="weui-tab__panel vux-fix-safari-overflow-scrolling"
                    >
                        <div style="position: relative;">
                            <div class="intro">
                                <div class="intro-content">
                                    <img
                                            class="course-img"
                                            :src="course.courseImgUrl"
                                            alt="课程图片"
                                    />
                                    <div class="conent-wrap">
                                        <div class="name" style="text-align:left;">
                                            {{course.courseName}}
                                        </div>
                                        <div class="des text-omit" style="text-align:left;">
                                            {{course.brief}}
                                        </div>
                                        <div class="title">
                                            <div class="teacher-name text-omit">
                                                讲师：<span>{{course.teacher.teacherName}}</span>
                                                <span class="line"></span>
                                                <span>{{course.teacher.position}}</span>
                                            </div>
                                        </div>
                                        <div class="lesson-info">
                                            <div class="boook-icon backgroun-img-set"></div>
                                            <div class="time">
                                                <span>{{course.totalDuration}} </span>
                                                课时
                                            </div>
                                            <div class="person-icon backgroun-img-set"></div>
                                            <div class="person">{{course.sales}}人已购买</div>
                                        </div>
                                    </div>

                                    <div class="content-right">

                                        <div class="button-wrap" @click="watchFirstCourse()">
                                            免费试看
                                            <div class="small-arrows"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="public-class-container is-pc">
                            <el-tabs v-model="activeName">
                                <el-tab-pane label="课程信息" name="intro">
                                    <div v-html="course.courseDescription" class="content-p pc-background">
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                            <div class="tab-fix-wrap"></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部购买 -->
            <div
                    class="public-class-footer"
                    slot="bottom"
                    style="border:1px solid #eee; height:60px; text-align:left;">
                <span class="product-descript" style="font-size:.347rem">成就自己</span>
                <span class="current-price" style="font-size:28px">
            <span class="current-price-unite" style="font-size:.347rem">
              ￥</span>{{course.discounts}}
          </span>
                <span class="current-price price">
                    <span class="current-price-unite">￥</span>
                     {{course.price}}
                  </span>
                <button
                        @click="buy(course.id)"
                        type="button"
                        class="weui-btn purchase-button weui-btn_mini weui-btn_primary"
                        style="width:155px;height:45px;font-size:17px;">
                    立即购买
                    <!-- ::after -->
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script th:inline="javascript">
    var vue = new Vue({
        el: "#course",
        data: {
            course: [[${course}]]
        },
        created() {
            console.log(this.course);
        }
    });
</script>
</html>
